<!-- Discription: svgBuilder, author: ydj, Date: 2021-07-09 16:58:52 -->
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$attrs">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang='ts'>
import { computed, defineComponent } from "vue";
interface Props {
  iconClass: string;
  className: string;
}
export default defineComponent({
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: () => "",
    },
  },
  setup: (props: Props) => {
    const iconName = computed((): string => `#icon-${props.iconClass}`);
    const svgClass = computed((): string => {
      if (props.className) {
        return "svg-icon" + props.className;
      } else {
        return "svg-icon";
      }
    });
    return {
        iconName,
        svgClass
    };
  },
});
</script>
<style lang='scss' scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>
